<!DOCTYPE html>
<html>
<head>
	<title>贪吃蛇</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<style type="text/css">
		.backDiv {
			text-align: center;
			position:absolute;
			top:20px;
			margin:0 auto;
			width:820px;
			height:550px;
		}
		.display {
			position:absolute;
			top:0px;
			left:685px;
			width:180px;
			height:510px;
			border: 5px solid black;
			background-color: #ccffff;
		}
		#gamePanel table {
			border-collapse: collapse;
			border: 5px solid black;
			background-color: #f0f0f0;
		}
		#gamePanel td {
			width:15px;
			height:15px;
		}
		#scoreDiv {
			position: absolute;
			top: 20px;
			left:20px;
			text-align: left;
			font-size: 20px;
			font-weight: bold;
		}
		#prompt {
			position: absolute;
			top: 180px;
			left: 20px;
			text-align: left;
			font-weight: bold;
		}
		#operator {
			position: absolute;
			top:550px;
			left:100px;
		}
		
	</style>
	<script>
	var snake = [];                                            // 蛇数组
	var barrers = [];                                          // 障碍物数组
	var game = {sizeX:"30",sizeY:"40",record:"0"};
	var appearTime = disappearTime =  0;                   // 超级食物出现
	var superFoodX = superFoodY = null;
	var color = 0;                                      // 食物颜色
	function init(){
		clearTimeout(game.time);
		snake = [];
		barrers = [];
		game.x = 0;game.y = 1;
		game.dir = null;
		game.direction = "right";
		game.rate = null;
		game.lengths = 2;                                 // 蛇的长度
		game.score = 0;
		$("scoreDiv").innerHTML = "得分："+game.score+"<br/><br/>长度："+ game.lengths+"<br/><br/>";
		$("pass").disabled = false;
		$("rate").disabled = false;
		$("start").disabled = false;
		bord();                                            // 设置界面
		barrer();                                              // 设置障碍物
		$("result").style.visibility = "hidden";
		snake.push("tb_" + game.x + "_" + (game.y-1));
		snake.push("tb_" + game.x + "_" + game.y);                  // 蛇头
	}
	function $(id){
		return document.getElementById(id);
	}
	
	function bord(){
		var panel = [];                  // 游戏面板
		var proPanel = [];                     // 提示面板
		panel.push("<table>");
		for(var i=0; i<game.sizeX; i++){
			panel.push("<tr>");
			for(var j=0; j<game.sizeY; j++){
				panel.push('<td id="tb_' + i + "_" + j + '" > </td>');
			}
			panel.push("</tr>");
		}
		panel.push("</table>");
		$("gamePanel").innerHTML = panel.join("");
		proPanel.push("<table>");
		proPanel.push('<tr>'+'<td width="20px" height="20px" bgcolor="#ff3300"></td>' + '<td>&nbsp得分+10</td>'+'</tr>');
		proPanel.push('<tr>'+'<td width="20px" height="20px" bgcolor="#33cc33"></td>' + '<td>&nbsp得分+30</td>'+'</tr>');
		proPanel.push('<tr>'+'<td width="20px" height="20px" bgcolor="#99ff66"></td>' + '<td>&nbsp得分+50</td>'+'</tr>');
		proPanel.push('<tr>'+'<td width="20px" height="20px" bgcolor="#ffff00"></td>' + '<td>&nbsp得分+100</td>'+'</tr>');
		proPanel.push('<tr>'+'<td width="20px" height="20px" bgcolor="#cc3399"></td>' + '<td>&nbsp得分-30</td>'+'</tr>');
		proPanel.push('<tr>'+'<td width="20px" height="20px" bgcolor="#000000"></td>' + '<td>&nbsp得分-50</td>');
		proPanel.push("</table>");
		$("prompt").innerHTML = proPanel.join("");
	}

	function barrer() {
		var passValue = $("pass").value;
		for(var i=0; i<barrers.length; i++) {
			$(barrers[i]).style.backgroundColor = "";
		}
		barrers = [];
		
	}
	// 开始游戏
	function startGame() {
		food();
		game.start = true;
		$("pass").disabled = true;
		$("rate").disabled = true;
		$("start").disabled = true;
		game.rate = $("rate").value;
		$(snake[0]).style.backgroundColor = "#0066ff";
		$(snake[1]).style.backgroundColor = "blue";
		game.time = setTimeout(function(){
			snakeMove();
		},game.rate);
		superFood();
	}
	
	
	function move() {
		$(snake[0]).style.backgroundColor = "";                                         // 保留蛇当前的位置
		for(var i=1; i<snake.length; i++) {
			snake[i-1] = snake[i];
		}
		snake[snake.length-1] = "tb_" + game.x + "_" + game.y;                          // 蛇头位置
		for(var i=0; i<snake.length-1; i++) {
			$(snake[i]).style.backgroundColor = "#0066ff";
		}
		$(snake[i]).style.backgroundColor = "blue";
	}                                                                                     // 食物 位置随机且不能与蛇位置重复
	function food() {
		game.fx = Math.floor(Math.random(game.sizeX)*game.sizeX);
		game.fy = Math.floor(Math.random(game.sizeY)*game.sizeY);
		if($("tb_" + game.fx + "_" + game.fy).style.backgroundColor != "") {food(); }
		else {$("tb_" + game.fx + "_" + game.fy).style.backgroundColor = "#ff3300"; }
	}
	
	
	// 蛇吃食物
	function eat(ef) {
		// 吃普通食物
		if(ef == 1) {snake.push("tb_" + game.fx + "_" + game.fy); game.score += 10; food();}
		
		game.lengths += 1;
		$("scoreDiv").innerHTML = "得分："+game.score+"<br/><br/>长度："+game.lengths+"<br/><br/>：";
	}
	
	
	
	</script>
</head>
<body onload="init();" onkeyup="control(event);" >
<div class="backDiv">
	<div class="display">
		<div id="scoreDiv">分数：0</div><br/>
		<div id="prompt"></div>
	</div>
	<div id="gamePanel"  style="float: left;"></div><br/>
	<div id="operator">
		选择关卡：<select id="pass" onchange="barrer();">
			<option value="1">关卡1</option>
			<option value="2">关卡2</option>
			<option value="3">关卡3</option>
			<option value="4">关卡4</option>
			<option value="5">关卡5</option>
		</select>&nbsp&nbsp
		速度：<select id="rate">
			<option value="500">慢</option>
			<option value="250">中</option>
			<option value="100">快</option>
		</select>&nbsp&nbsp
		<input type="button" id="start" value="开始" onclick="startGame();" />&nbsp&nbsp
		<input type="button" id="resets" value="重玩" onclick="init();" />
	</div>
	<div id="result"></div>
</div>



</body>
</html>